<template>
  <div v-if="shoopObj.id" class="box" ref="box">
    <van-nav-bar
      class="bt"
      title="商品详情"
      left-text="返回"
      left-arrow
      @click-left="back"
      @click-right="sy"
    >
      <template #right>
        <van-icon name="home-o" size="18" />
      </template>
    </van-nav-bar>
    <div class="content">
      <!-- 轮播图 -->
      <van-swipe class="my-swipe" @change="onChange">
        <van-swipe-item>
          <img style="width:100%;height:100%" :src="shoopObj.imgurl" alt srcset />
        </van-swipe-item>
        <template #indicator>
          <div class="custom-indicator">{{ current + 1 }}/4</div>
        </template>
      </van-swipe>
      <!--  提示秒杀    -->
      <div class="ticket">
        <div v-if="shoopObj.recommend == 1" class="oneP">
          <p>
            <i>￥</i>
            {{shoopObj.newPrice}}
          </p>
          <p>￥{{shoopObj.oldPrice}}</p>
        </div>
        <div class="twoP">
          <p>
            <!-- {{shoopObj.recommend}} -->
            {{shoopObj.recommend == 1?'限时秒杀':'拼团'}}
            <span
              class="by"
            >{{shoopObj.recommend == 1?'包邮':'二人团'}}</span>
          </p>
          <div v-if="shoopObj.recommend == 0" class="pt1">
            <div class="oneP1">
              <p>
                <i>￥</i>
                {{shoopObj.newPrice}}
              </p>
              <p>￥{{shoopObj.oldPrice}}</p>
              <div class="jian">已拼团2.3万件</div>
            </div>
          </div>
          <div v-if="shoopObj.recommend == 1" class="ys">
            <div class="tiao">
              <i :style="{'width':percentage + '%'}"></i>
            </div>
            <span>已售{{percentage}}%</span>
          </div>
        </div>
        <div v-if="shoopObj.recommend == 1">
          <p class="jl">距离本场结束></p>
          <van-count-down :time="time">
            <template #default="timeData">
              <span class="block">{{ timeData.hours }}</span>
              <span class="colon">:</span>
              <span class="block">{{ timeData.minutes }}</span>
              <span class="colon">:</span>
              <span class="block">{{ timeData.seconds }}</span>
            </template>
          </van-count-down>
        </div>
      </div>
      <!-- 商品信息 -->
      <div>
        <van-cell-group>
          <van-cell :title="shoopObj.title" :label="shoopObj.info" />
        </van-cell-group>
      </div>
      <van-image
        width="100%"
        height="80"
        src="https://img.miyabaobei.com/d1/p6/2020/09/01/9d/24/9d24403401bf96e352cd7a2600699631759811150.jpg"
      />
      <van-cell v-if="shoopObj.recommend == 1">
        <span>限时秒杀</span>
        <span style="margin:10px;">总限购100件 超出按原价计算</span>
      </van-cell>

      <!-- 拼团模块 -->
      <div style="margin-top:10px;background:#fff">
        <p class="p1">有2人正在拼团，参与可直接成团哦~</p>
        <pt :sid="shoopObj.id"></pt>
      </div>
      <!--  -->
      <van-cell is-link>
        <span>已选</span>
        <span style="margin:10px;">{{shoopObj.specification[0]}}</span>
      </van-cell>
      <van-cell is-link>
        <ul class="detail-promiseSign">
          <li>包邮</li>
          <li>不支持七天放心退</li>
          <li>包税</li>
          <li>正品保障</li>
        </ul>
      </van-cell>
      <div style="margin-top:10px">
        <van-cell is-link @click="linkage">
          <span>配送</span>
          <span style="margin:10px;">北京市北京市朝阳区</span>
        </van-cell>
        <van-cell is-link>
          <span>运费</span>
          <span style="margin:10px;">免运费</span>
        </van-cell>
      </div>

      <div style="margin-top:10px">
        <van-cell is-link>
          <div class="pj">
            <h3>商品评价(1893)</h3>
            <p>
              <span style="margin:10px;">好评</span>
              <span>99%</span>
            </p>
          </div>
        </van-cell>
        <discuss></discuss>
        <discuss></discuss>
      </div>
      <!-- 猜你喜欢 -->
      <div style="margin-top:10px;background:#fff">
        <h3 class="like">猜你喜欢</h3>
        <glike></glike>
      </div>

      <div style="margin-top:10px">
        <product :message="shoopObj.message"></product>
      </div>
    </div>
    <!--  -->
    <div class="gw">
      <div class="icon" @click="jump">
        <van-icon name="shopping-cart-o" size="0.5rem" />
        <p>购物车</p>
      </div>
      <div
        class="car"
        :style="{'line-height':shoopObj.recommend == 0?'30px':'1rem'} "
        @click="immediately"
      >
        <p v-if="shoopObj.recommend == 0">￥{{shoopObj.oldPrice}}</p>
        {{shoopObj.recommend == 1?'加入购物车':'单独购买'}}
      </div>
      <div
        class="ms"
        :style="{'line-height':shoopObj.recommend == 0?'30px':'1rem'} "
        @click="immediately"
      >
        <p v-if="shoopObj.recommend == 0">￥{{shoopObj.newPrice}}</p>
        {{shoopObj.recommend == 1?'立即秒杀':'2人拼团'}}
      </div>
    </div>

    <van-popup
      v-model="show"
      closeable
      close-icon-position="top-right"
      position="bottom"
      :style="{ height: '50%' }"
    >
      <div class="header van-hairline--bottom">
        <div>
          <img :src="shoopObj.imgurl" alt class="simg" />
        </div>
        <div style="margin-left:20px">
          <p class="pirce">
            <span>￥{{shoopObj.newPrice}}</span>
            <span>秒杀</span>
            <span>￥{{shoopObj.oldPrice}}</span>
          </p>
          <p>库存充足</p>
          <p>已选 {{tc}}</p>
        </div>
      </div>
      <div class="popbody van-hairline--bottom">
        <p>规格</p>
        <van-tag
          plain
          size="medium"
          @click="tcFn('套餐一')"
          :type="tc =='套餐一'? 'danger' :'primary'"
        >套餐一</van-tag>
        <van-tag
          plain
          size="medium"
          @click="tcFn('套餐二')"
          :type="tc =='套餐二'? 'danger' :'primary'"
        >套餐二</van-tag>
        <van-tag
          plain
          size="medium"
          @click="tcFn('套餐三')"
          :type="tc =='套餐三'? 'danger' :'primary'"
        >套餐三</van-tag>
      </div>
      <div class="header dibu">
        <p>数量</p>
        <van-stepper v-model="num" theme="round" button-size="22" disable-input />
      </div>
      <div class="btn">
        <!-- <div class="car" @click="addcart">加入购物车</div>
        <div class="ms" @click="seckill">立即秒杀</div>-->
        <div
          class="car"
          :style="{'line-height':shoopObj.recommend == 0?'30px':'1rem'} "
          @click="addcart"
        >
          <p v-if="shoopObj.recommend == 0">￥{{shoopObj.oldPrice}}</p>
          {{shoopObj.recommend == 1?'加入购物车':'单独购买'}}
        </div>
        <div
          class="ms"
          :style="{'line-height':shoopObj.recommend == 0?'30px':'1rem'} "
          @click="seckill"
        >
          <p v-if="shoopObj.recommend == 0">￥{{shoopObj.newPrice}}</p>
          {{shoopObj.recommend == 1?'立即秒杀':'2人拼团'}}
        </div>
      </div>
    </van-popup>
    <van-popup v-model="site" position="bottom" :style="{ height: '50%' }">
      <Gsite></Gsite>
    </van-popup>
  </div>
</template>

<script>
import { mapActions } from "vuex";
import { gwlocal, jzlocal } from "../utils/localStorage";
import { tokenCook } from "../utils/cookies";
export default {
  name: "detail",
  data() {
    return {
      current: 0,
      time: 1000000,
      show: false,
      num: 1,
      site: false,
      shoopObj: {},
      tc: "套餐一",
    };
  },
  methods: {
    ...mapActions("gdetail", ["getShoop"]),
    ...mapActions("login", ["getinfo"]),
    ...mapActions("groups", ["addgroups", "getmass"]),
    onChange(index) {
      this.current = index;
    },
    linkage() {
      console.log(1111);
    },
    // 初始数据
    async getinit() {
      let ids = this.$route.query.id;
      let r = await this.getShoop({ ids });
      this.shoopObj = r[0];
      try {
        this.shoopObj.specification =
          JSON.parse(this.shoopObj.specification) || "[]";
      } catch (error) {
        this.shoopObj.specification = ["1", "2", "3"];
      }
      if (this.$route.query.mode) {
        this.shoopObj.recommend = this.$route.query.mode;
      }
    },
    // 导航栏返回
    back() {
      this.$router.back();
    },
    // 返回首页
    sy() {
      this.$router.push("/home");
    },
    // 立即秒杀  出弹层
    immediately() {
      this.show = true;
    },
    // 规格选择
    tcFn(text) {
      this.tc = text;
    },
    // 立即秒杀
    async seckill() {
      let obj = {
        num: this.num,
        bm: this.tc,
        id: this.shoopObj.id,
      };
      if (this.shoopObj.recommend == 0) {
        let token = tokenCook.get();
        if (!token) {
          this.$router.push("/login");
          return;
        }
        let r = await this.getinfo(token);
        let data = {
          regimental: r.id,
          uids: JSON.stringify([r.id]),
          sid: this.shoopObj.id,
        };
        await this.addgroups(data);
        await this.getmass({ id: this.shoopObj.id });
        this.show = false;
      } else {
        jzlocal.set([obj]);
        this.$router.push("/groupon");
      }
    },
    // 加入购物车
    addcart() {
      let arr = gwlocal.get();
      let item = arr.find((v) => v.id == this.shoopObj.id && v.bm == this.tc);
      if (item) {
        item.num += this.num;
      } else {
        arr.push({
          num: this.num,
          bm: this.tc,
          id: this.shoopObj.id,
        });
      }
      gwlocal.set(arr);
    },
    // 跳转到购物车页面
    jump() {
      this.$router.push("/shoopcar");
    },
  },
  computed: {
    // 计算已售百分比
    percentage() {
      // console.log(this.shoopObj.inventory);
      // console.log(this.shoopObj.allNum);
      // 剩余
      let sy = this.shoopObj.inventory * 1;
      // 总量
      let all = this.shoopObj.allNum * 1;
      // 百分比
      let bf = 100 - ((sy / all) * 100).toFixed();
      return bf;
    },
  },
  async mounted() {
    // console.log(this.$route.query.id);
    this.getinit();
  },
  watch: {
    $route(e) {
      this.getinit();
      this.$refs.box.scrollTop = 0;
    },
  },
};
</script>

<style scoped>
.p1 {
  font-size: 12px;
  padding-left: 10px;
}

.pt1 {
  width: 350px;
  height: 30px;
  background-color: rgba(245, 245, 245, 0.3);
}

.oneP1 {
  /* width: 60%; */
  height: 100%;
  display: flex;
  align-items: center;
}

.oneP1 p:nth-child(1) {
  font-size: 20px;
}

.oneP1 p:nth-child(2) {
  font-size: 12px;
  color: #ffffff;
  text-decoration: line-through;
}

.jian {
  margin-left: 155px;
  font-size: 12px;
  color: #ffffff;
}

.box {
  position: absolute;
  top: 0;
  bottom: 1rem;
  width: 100%;
  /* height: 100%; */
  background-color: #f5f5f5;
  overflow: hidden;
  overflow-y: auto;
}

.van-hairline--bottom::after {
  border-bottom-width: 3px;
}

.content {
  position: absolute;
  top: 46px;
  bottom: 0;
  width: 100%;
}

.custom-indicator {
  position: absolute;
  right: 5px;
  bottom: 5px;
  padding: 2px 5px;
  font-size: 12px;
  background: rgba(0, 0, 0, 0.1);
}

.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  height: 300px;
  text-align: center;
  background-color: #39a9ed;
}

.ticket {
  height: 63px;
  background-color: #ea4141;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 10px;
}

.oneP p:nth-child(1) {
  color: #fff;
  font-size: 0.35rem;
  font-weight: bolder;
}

.oneP p:nth-child(2) {
  color: #fff;
  font-size: 0.2rem;
  font-weight: bolder;
}

.twoP {
  margin-right: 50px;
}

.twoP p:nth-child(1) {
  font-size: 0.3rem;
  font-weight: bolder;
  color: #fff;
}

.by {
  display: inline-block;
  border: 1px solid #ffffff;
  font-size: 12px;
}

.tiao {
  width: 60px;
  height: 3px;
  background-color: rgba(255, 255, 255, 0.5);
}

.tiao i {
  display: block;
  height: 100%;
  width: 50%;
  background-color: #fff;
}

.ys {
  display: flex;
  justify-content: center;
  align-items: center;
}

.ys span {
  font-size: 0.2rem;
  color: #fff;
}

.jl {
  font-size: 0.2rem;
  color: #fff;
}

.colon {
  display: inline-block;
  margin: 0 4px;
  color: #ee0a24;
}
.block {
  display: inline-block;
  width: 22px;
  color: #fff;
  font-size: 12px;
  text-align: center;
  background-color: #ee0a24;
}

.detail-promiseSign {
  list-style: none outside none;
}

.detail-promiseSign li {
  float: left;
  margin-right: 5px;
}

.detail-promiseSign li::before {
  content: "●";
  margin-right: 0.13333rem;
  font-size: 0.12rem;
  vertical-align: middle;
}

.pj {
  display: flex;
  justify-content: space-between;
}

.gw {
  display: block;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #fff;
  height: 1rem;
  z-index: 1000;
  overflow: hidden;
  display: flex;
}

.icon {
  flex: 1;
  text-align: center;
}

.car,
.ms {
  flex: 2;
  text-align: center;
  line-height: 1rem;
}

.ms {
  flex: 2;
  background-color: #ea4141;
  color: #fff;
}

.car {
  background-color: #fe6e6e;
  color: #fff;
}

.van-nav-bar {
  background-color: #ea4141;
}

.van-nav-bar .van-icon {
  color: #fff;
  font-size: 30px;
}

.bt >>> .van-nav-bar__text,
.bt >>> .van-nav-bar__title {
  color: #fff;
}

.bt >>> .van-icon-arrow-left::before {
  content: "\F008";
  color: #fff;
}

.block {
  background-color: #fff;
  color: #ea4141;
  border-radius: 100%;
}

.colon {
  color: #fff;
}

.simg {
  width: 1.5rem;
  height: 1.5rem;
  border: 1px solid #cccccc;
}

.header {
  display: flex;
  padding: 10px;
}

.pirce span:nth-child(1) {
  color: #ea4141;
  font-size: 16px;
  font-weight: bold;
}

.pirce span:nth-child(2) {
  display: inline-block;
  background-color: #ea4141;
  padding: 0 2px;
  font-size: 12px;
  color: #fff;
  margin-left: 3px;
}

.pirce span:nth-child(3) {
  text-decoration: line-through;
  color: #ccc;
  margin-left: 3px;
}

.popbody {
  padding: 10px;
}

.popbody .van-tag {
  margin: 10px;
}

.dibu {
  justify-content: space-between;
  margin-top: 20px;
}

.btn {
  position: absolute;
  width: 100%;
  bottom: 0;
  display: flex;
}

.like {
  padding-left: 10px;
}
</style>